<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-select.min.css">
    <link rel="stylesheet" href="../css/select2.min.css">
    <link rel="stylesheet" href="../css/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            padding-bottom: 40px;
            background-color: #fff;
        }

        .form-signin {
            width: 100%;
            max-width: 640px;
            margin: auto;
            padding: 15px;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .sr-only2 {
            margin-top: 15px;
        }


        .logodiv img {
            width: 240px;
            margin: 0 auto;
            display: block;
        }

        .logodiv {
            text-align: center;
        }

        .logodiv h1 {
            font-size: 1.4rem;
            color: #03357a;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .logodiv h2 {
            font-size: 1.5rem;
            margin-bottom: 80px;
        }



        .fgtpaws {
            text-align: center;
            margin-top: 10px;
        }

        .btn {
            padding: 0.375rem 0.15rem
        }

        .btn-tiqu {
            width: 125px;
            margin: 0 auto;
            display: block;
        }

        .buytitle {
            font-size: 1.1rem;
            color: #03357a;
            margin-top: 20px;
        }

        .buytitle span {
            font-size: 1rem;
            color: #999;
        }
        .action-row button {
            margin-bottom: 15px;
        }

        .buysearch {
            font-size: smaller;
        }

        .formscreen .form-control-theme {
            font-size: smaller;
        }

        .action-row {
            position: fixed;
            width: 100%;
            bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
            background: #fff;
            left: 0;
        }
        .wareContent{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .container2 {
            padding: 10px 1rem;
            display: block;
            height: 100vh;
            overflow: hidden;
        }
        .lineCss{
            width: 90%;
            margin: 0 auto;
            font-size: 0.8rem;
            padding: 20px 20px;
            
        }
        .lineBorder{
            width: 90%;
            margin: 0 auto;
            font-size: 0.8rem;
            padding: 20px 20px;
            border-bottom: 1px solid #000;
        }
        .bootstrap-select {
            width: calc(100% - 0px) !important;
        }

        .formscreen .filter-option-inner-inner {
            font-size: smaller;
        }

        .myselect {
            width: calc(100% - 0px);
        }

        .btn-action:disabled {
            background: #D9D9DA !important;
            color: #808081 !important;
        }

        .buysearch {
            width: 100%;
            display: block;
        }
    </style>
</head>

<body>
    
    <div id="app">
        <div class="container2">
            <div class="modal fade fullmodal show" style="display: block;background: #fff;"
                id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="logodiv">
                                <img class="bannerlogo pt-3" src="../image/logo.jpeg">
                                <h3 class="mt-3 mb-5">{{lan['Shelves']}}</h3>
                            </div>
                            <div class="row  align-items-center">
                                <div class="col-12">
                                    <div class="d-flex bd-highlight align-items-center">
                                        <div class="p-2 bd-highligh  flex-shrink-0 filedlabel">{{lan['Packing_Slip']}}
                                        </div>
                                        <div class="p-2 flex-grow-1 bd-highlight">
                                            <input type="text" v-model="searchdata.PackSlip"
                                                :placeholder="lan['DN_No_placeholder']"
                                                class="form-control form-control-theme" value="">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-12">
                                    <div class="d-flex bd-highlight align-items-center">
                                        <div class="p-2 bd-highligh flex-shrink-0 filedlabel">{{lan['User']}}</div>
                                        <div class="p-2 flex-grow-1 bd-highlight">
                                            <input type="text" v-model="searchdata.name" disabled
                                                class="form-control form-control-theme" value="">
                                        </div>
                                    </div>
                                </div>
                               
                            </div>                            
                            <div class=" row justify-content-center mt-4">
                              
                                <div  class="col-4 col-md-4">
                                    <button type="button"  onclick="loadData();" tapmode=""
                                        class="btn btn-primary btn-action">{{lan['OK']}}</button>
                                </div>
            
                                <div  class="col-4 col-md-4">
                                    <button type="button" tapmode="" onclick="close_win()"
                                        class="btn btn-primary btn-action">{{lan['Cancel']}}</button>
                                </div>
                            </div>

                        </div>

                        <div class="modal-footer">
                            <div class="copyright">
                                <div class="row" :gutter="10">
                                    <div  class="col-5" style="text-align: right;">{{lan['Version']}}：</div>
                                    <div  class="col-7">{{appversion}}</div>
                                    <div  class="col-5"  style="text-align: right;">{{lan['Site']}}：</div>
                                    <div  class="col-7">{{SiteName}}</div>
                                    <div  class="col-5"  style="text-align: right;">{{lan['Company']}}：</div>
                                    <div  class="col-7">{{CompanyName}}</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div>
                <table  class="table table-buy table-borderless table-sm">
                    <tr>
                        <td class="ttl">{{lan['Packing_Slip']}}</td>
                    </tr>
                    <tr>
                        <td>{{searchdata.PackSlip}}</td>
                    </tr>
                </table>
            </div>
            <div style="overflow-y: scroll;height:90vh;">
                <div v-for="(item,index) in list" :key="index" class="row">
                    <div   class="col-12 col-sm-12 col-md-12">
                        <div class="d-flex bd-highlight align-items-start">
                            <div  class="pt-2 bd-highligh">
                                <table  class="table table-buy table-borderless table-sm">
                                    <tr>
                                        <td class="ttl">PackLine</td>
                                    </tr>
                                    <tr >
                                        <td>{{item.RcvDtl_PackLine}}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="pt-2 flex-grow-1 bd-highlight">
                                <table  class="table table-buy table-borderless table-sm">
                                    <tr>
                                        <td class="ttl">{{lan['No']}}</td>
                                        <td class="ttl">{{lan['Line']}}</td>
                                        <td class="ttl">{{lan['RelNum']}}</td>
                                    </tr>
                                    <tr>
                                        <td>{{item.RcvDtl_PONum}}</td>
                                        <td>{{item.RcvDtl_POLine}}</td>
                                        <td>{{item.RcvDtl_PORelNum}}</td>
                                    </tr>
                                    <tr>
                                        <td class="ttl">{{lan['Part']}}</td>
                                        <td></td>
                                        <td class="ttl">Quantity</td>
                                    </tr>
                                    <tr>
                                        <td>{{item.RcvDtl_PartNum}}</td>
                                        <td></td>
                                        <td>{{processNumber(item.RcvDtl_OurQty,item.UOM_NumOfDec)}}</td>
                                    </tr>
                                    <tr>
                                        <td class="ttl" colspan="3">{{lan['Desc']}}</td>
                                        
                                    </tr>
                                    <tr>
                                        <td colspan="3">{{item.RcvDtl_PartDescription}}</td>
                                    </tr>
                                    
                                    <tr>
                                        <td colspan="3" style="display: flex;align-items: center;"><span style="display: inline-block;margin-right: 4px;">Received</span> <input type="checkbox" @click="checkClick(item,index)" style="margin-right: 5px;" v-model="item.Received"   name="Received" id="Received"></td>
                                    </tr>
                                    
                                </table>
                            </div>
                        </div>

                      
                    </div>
                </div>
            </div>
            

            
        </div>

        <div class="action-row">
            <div class="container">
                <div style="width: 100%;" class=" row justify-content-center  align-items-center">
                   
                    <div id="btn2" class="col-5 col-md-5">
                        <button type="button" tapmode="" :disabled="receipt_btn" onclick="submitfrom();"
                            class="btn btn-primary btn-action btn-submit">{{lan['Confirm']}}</button>
                    </div>
                    <div  id="btn4" class="col-5 col-md-5">
                        <button type="button" tapmode="" onclick="close_win1();"
                            class="btn btn-primary btn-action btn-print">{{lan['Cancel']}}
                        </button>
                    </div>

                </div>

            </div>

        </div>
    </div>

</body>
<script type="text/javascript" src="../script/lang.js"></script>
<script type="text/javascript" src="../script/model.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../script/bootstrap-select.min.js"></script>
<script type="text/javascript" src="../script/select2/select2.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var postcount = 0;
    var tagspostcount = 0;
    var returncount = 0;
    var model_show = 1;
    var postlist = [];
    var tags = [];
    const app = new Vue({
        el: '#app',
        data: {
            lineCss:"lineCss",
            lineBorder:'lineBorder',
            list: [],
            newList:[],
            screenwidth: document.body.clientWidth,
            house: [],
            bin: [],
            WareHouseCodeList:[],
            BinNumList:[],
            reason:[],
            BinNum: "",
            searchdata: {
                name: '',
                PackSlip:'',
                ArrivedDate: timenow(),
            },
            uinfo: {},
            lotinfo: {},
            create_btn: false,
            receipt_btn: true,
            Lot_btn:false,
            print_btn: true,
            print_num: '',
            hasError: false,
            confirm_btn:false,
        },
        mounted() {
            const that = this
            window.onresize = () => {
                return (() => {
                    that.screenwidth = document.body.clientWidth
                })()
            }
            that.showmodal();
        },
        methods: {
            // check_canclick: function () {
            //     var canclick = false;
            //     var tg = false;
            //     var sc = true;
            //     for (i in this.list) {
            //         let item =this.list[i]
            //         if(!item.Received){
            //             tg = true;
            //         }
                   
            //         sc = false;
                    

            //     }
            
            //     if (tg  || sc) {
            //         canclick = true;
            //     }

            //     this.receipt_btn = canclick;
            //     console.log(this.receipt_btn,11111)
            // },
            checkClick(item,index){
                // this.check_canclick()
            },
            showmodal: function () {
                if (this.screenwidth < 576) {
                    $('#exampleModal').modal('show');
                    //init_select();
                } else {

                    $('#PackSlip').focus();
                }
            },
           
        }
    });
    apiready = function () {
        api.parseTapmode();
        server = getapi();
        api.addEventListener({ name: 'navitembtn' }, function (ret, err) {
            if (ret.type == 'left') { close_win1() }
            if (ret.type == 'right') { scan(); }

        });
        api.addEventListener({
            name: 'keyback',
            extra: {
                slidBackIntercept: true    
            }
        }, function (ret, err) {
            close_win1() 

        });
        app.vendors = get_prefs_data("Vendors");
        app.uinfo = get_user_info();
        userinfo = get_user_info();
        app.searchdata.name = userinfo.Name;
        
        api.addEventListener({
            name: 'sn_inventory_transfer'
        }, function (ret, err) {
            if(ret && ret.value){
                var snposts = ret.value;
                console.log(JSON.stringify(snposts),33333)
                app.searchdata.TranQty = snposts.TranQty;
                app.searchdata.SerialNum = snposts.SerialNum;
                console.log(JSON.stringify(app.searchdata),44444)
                api.closeWin({name: 'sn_inventory_transfer'});
            }
        });
        api.addEventListener({
            name: 'infrared_scanning'
        }, function (ret, err) {
            console.log(JSON.stringify(ret));
            if (ret && ret.value && ret.value.str && is_scan == 0) {
                app.searchdata.PackSlip = ret.value
            }

        });
    }
    function init_list(data) {
        var ret = [];
        for (i in data) {
            data[i].PartNum = data[i].RcvDtl_PartNum;
            data[i].PartDescription = data[i].RcvDtl_PartDescription;
            data[i].NumOfDec = data[i].UOM_NumOfDec;
            data[i].IUM = data[i].RcvDtl_IUM
            data[i].PackSlip = data[i].RcvDtl_PackSlip;
            data[i].PackLine = data[i].RcvDtl_PackLine;
            data[i].NumOfDec = data[i].UOM_NumOfDec
            data[i].PONum = data[i].RcvDtl_PONum
            data[i].OnhandQty = data[i].RcvDtl_OurQty;
            data[i].LotNum = data[i].RcvDtl_LotNum;
            data[i].PORelNum = data[i].RcvDtl_PORelNum;
            data[i].VendorNum = data[i].RcvDtl_VendorNum
            data[i].Received = data[i].RcvDtl_Received;
            ret.push(data[i]);

        }
        return ret;
    }
    function loadData(){
        console.log(app.searchdata.PackSlip,333333)
        if(!app.searchdata.PackSlip){
            api.toast({
                msg: lan['DN_No_check'],
                location: 'middle'
            });
            return;
        }else{
            userinfo = get_user_info();
        
            showProgress(lan['Loading']);

            api.ajax({
                url: server + 'BaqSvc/WMS_PORcvList/?CompID='+ userinfo.Company +'&Site='+userinfo.Site+"&PackSlip='"+app.searchdata.PackSlip +"'",
                method: 'get',
                returnAll: false,
                headers: {
                    'Authorization': userinfo.Token,
                    'Content-Type': 'application/json;charset=utf-8'
                },
                data: {}
            }, function (ret, err) {
                ajaxing = 0;
                console_debug(ret, err);
                hideProgress();
                console.log(JSON.stringify(ret.value),99999)
                if (ret && ret.value.length > 0) {
                    var newlist = init_list(ret.value);

                    if (newlist.length == 0) {
                        api.toast({
                            msg: "no data!",
                            location: 'middle'
                        });
                        return;
                    }
                    app.list = [];
                    app.list = app.list.concat(newlist);
                    console.log(JSON.stringify(app.list),2222222)
                    app.confirm_btn = true
                    app.receipt_btn = false
                    // app.check_canclick()
                    $('#exampleModal').modal('hide');
                    

                } else {
                    api.toast({
                        msg: "no data!",
                        location: 'middle'
                    });
                }

            });
        }
    }
    function close_win1() {
        console.log(111111)
        var msg = app.confirm_btn ? lan['issue_cancel_tips'] : lan['issue_cancel_tips'];
        if (app.confirm_btn && app.list.length != 0) {
            api.confirm({
                title: lan['Tips'],
                msg: msg,
                buttons: [lan['NO'], lan['YES'], lan['Cancel']]
            }, function (ret, err) {
                var index = ret.buttonIndex;
                if (index == 2) {
                    submitfrom();
                } else if (index == 1) {
                    close_win();
                }
            });
        }else{
            close_win();
        }


    }
    
    function scan() {
        var FNScanner = api.require('FNScanner');
        FNScanner.open({
            autorotation: true
        }, function (ret, err) {
            console_debug(ret, err);
            if (ret) {
                if (ret.eventType == 'success') {
                    // alert(ret.content);
                    app.searchdata.PackSlip = ret.content
                }

            } else {
                //alert(JSON.stringify(err));
            }
        });
    }
    function submitfrom() {
     
        var postrows = [];
        for (i in app.list) {
            let item = app.list[i]
         
            var row = {
                "VendorNum": item.VendorNum,
                "PackSlip":app.searchdata.PackSlip,
                "PackLine": item.PackLine,
                "PartNum": item.PartNum,
                "LotNum": item.LotNum,
                "Received": item.Received,
            }

            postrows.push(row)
        }
        if(ajaxing){return;}showProgress(lan['Loading']);
        console_debug(app.list, 'submitfrom');

        // return
        console.log(JSON.stringify(postrows),111111)
        // return
        let data = [];
        for (i in postrows) {
            submit_transfer(postrows[i], i);
        } 
        
    }


    function submit_transfer(item,ind) {
        let index = []
        let datas = []
        datas.push(item)
        var data1 = {
            "CompanyID": userinfo.Company,
            "PlantID": userinfo.Site,
            "UserName": userinfo.Name,
            "Password": userinfo.password,
            "Data": JSON.stringify(datas)
        }
       

        api.ajax({
            url: wmsserver + 'porcvconfirm/',
            method: 'post',
            returnAll: false,
            headers: {
                'token': wmstoken,
                'Content-Type': 'application/json;charset=utf-8'
            },
            data: {
                body: create_submit_data(data1)
            }
        }, function (ret, err) {
            ajaxing = 0;
            console_debug(ret, err);
            console.log(JSON.stringify(ret),11111)
            console.log(JSON.stringify(err),22222)
            if (ret && ret.code == 1) {
                hideProgress();
                api.alert({
                    title: lan['Tips'],
                    msg: lan['Submitted_successfully']
                }, function (ret, err) {
                    app.receipt_btn = true;
                    api.closeWin({});
                });
                
            } else {
                hideProgress();
                app.receipt_btn = true
                errMassage(ret.msg)
            }

        });
    }

</script>

</html>